import { Component } from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Icon, Modal, Form, Input } from 'antd';

const FormItem = Form.Item;

class ChangePasswordModal extends Component {
  handleSubmit = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (err) {
        return;
      }
      onOk(values);
    });
  };

  render() {
    const { onCancel, form } = this.props;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const title = '修改密码';

    return (
      <Modal
        title={
          <>
            <Icon type="edit" />&nbsp;&nbsp;{title}
          </>
        }
        visible={true}
        onOk={this.handleSubmit}
        onCancel={onCancel}>
        <Form onSubmit={this.okHandler}>
          <FormItem {...formItemLayout} label="新密码">
            {getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                  message: '新密码是必填项',
                },
              ],
            })(<Input type="password" placeholder="请填写新密码" />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
if (process.env.UMI_ENV !== 'prod') {
  ChangePasswordModal.propTypes = {
    dispatch: PropTypes.func.isRequired,
    form: PropTypes.object.isRequired,
    onOk: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
  };
}

ChangePasswordModal.defaultProps = {
  dispatch: () => {},
  onOk: () => {},
  onCancel: () => {},
  form: {},
};

function mapStateToProps(state, ownProps) {
  const { onOk, onCancel } = ownProps;

  return {
    onOk,
    onCancel,
  };
}

export default connect(mapStateToProps)(Form.create()(ChangePasswordModal));
